<template>
  <el-dialog :append-to-body="true" :close-on-click-modal="false" :before-close="cancel" :visible.sync="dialog" title="订单详情" width="1500px">
    <el-card class="box-card">
      <div slot="header" class="clearfix header agent-header">
        <span>代理信息</span>
      </div>
      <!--表格渲染-->
      <el-table v-loading="loading" :data="form.agent" size="small" highlight-current-row style="width: 100%;">
        <el-table-column prop="id" label="代理id"/>
        <el-table-column prop="name" label="代理"/>
        <el-table-column prop="level" label="等级"/>
        <el-table-column prop="accountId" label="资金id"/>
        <el-table-column prop="amount" label="提成金额"/>
        <el-table-column prop="commission" label="提成比例"/>
        <el-table-column prop="openid" label="openid"/>
        <el-table-column prop="parent" label="父级代理"/>
        <el-table-column prop="telphone" label="电话"/>
        <el-table-column prop="area" label="地址"/>
        <el-table-column prop="created" label="创建时间"/>
        <el-table-column prop="remark" label="备注"/>
      </el-table>
    </el-card>
    <el-row :gutter="20" style="margin-top: 20px">
      <el-col v-if="form.customer" :xs="24" :sm="24" :md="8" :lg="5" :xl="5" style="margin-bottom: 10px">
        <el-card class="box-card">
          <div slot="header" class="clearfix header user-header">
            <span>用户信息</span>
          </div>
          <div class="card-content">
            <div>用户名称：<span>{{ form.customer.name ? form.customer.name : '-' }}</span></div>
            <div>用户昵称：<span>{{ form.customer.nickName }}</span></div>
            <div>用户类型：<span>{{ form.customer.type }}</span></div>
            <div>用户性别：<span>{{ form.customer.gender }}</span></div>
            <div>用户余额：<span>{{ form.customer.amount }}</span></div>
            <div>创建时间：<span>{{ form.customer.created }}</span></div>
          </div>
        </el-card>
      </el-col>
      <el-col v-if="form.shop" :xs="24" :sm="24" :md="8" :lg="12" :xl="5" style="margin-bottom: 10px">
        <el-card class="box-card">
          <div slot="header" class="clearfix header shop-header">
            <span>商家信息</span>
          </div>
          <div class="card-content flex">
            <div>
              <div>商户id：<span>{{ form.shop.id }}</span></div>
              <div>商户名称：<span>{{ form.shop.shopName }}</span></div>
              <div>商户openid：<span>{{ form.shop.openid }}</span></div>
              <div>商户分成：<span>￥{{ form.shop.amount }}</span></div>
              <div>提成比例：<span>{{ form.shop.commission }}%</span></div>
              <div>联系电话：<span>{{ form.shop.telphone }}</span></div>
              <div>商铺地址：<span>{{ form.shop.address }}</span></div>
            </div>
            <div>
              <div>所属代理：<span>{{ form.shop.agentId }}</span></div>
              <div>名下业务：<span>{{ form.shop.salesmanId }}</span></div>
              <div>业务提成：<span>{{ form.shop.salesmanCommission }}%</span></div>
              <div>名下维修：<span>{{ form.shop.engId }}</span></div>
              <div>维修提成：<span>{{ form.shop.engCommission }}%</span></div>
              <div>创建时间：<span>{{ form.shop.created }}</span></div>
              <div>订单备注：<span>{{ form.shop.remark }}</span></div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col v-else :xs="24" :sm="24" :md="8" :lg="12" :xl="5" style="margin-bottom: 10px">
        <el-card class="box-card">
          <div slot="header" class="clearfix header shop-header">
            <span>商家信息</span>
          </div>
          <div class="card-content flex">
            <div style="color: #909399;text-align: center">暂无绑定商家信息</div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="8" :lg="7" :xl="5" style="margin-bottom: 10px">
        <el-card class="box-card">
          <div slot="header" class="clearfix header worker-header">
            <span>工作人员</span>
          </div>
          <!--表格渲染-->
          <el-table v-loading="loading" :data="form.eng" size="small" highlight-current-row style="width: 100%;">
            <el-table-column prop="name" label="名称"/>
            <el-table-column prop="telphone" label="电话" width="100px;"/>
            <el-table-column prop="amount" label="提成"/>
            <el-table-column prop="remark" label="备注"/>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
    <!--<div style="clear: both"></div>-->
  </el-dialog>
</template>

<script>
export default {
  props: {
  },
  data() {
    return {
      loading: false, dialog: false,
      form: {
      },
      rules: {
      }
    }
  },
  methods: {
    cancel() {
      this.dialog = false
      this.$refs['form'].resetFields()
    }
  }
}
</script>

<style scoped>
  .header{
    padding: 2px 10px;
    font-size: 18px;
  }
  .agent-header{
    background: rgba(168, 75, 84, .7);
    box-shadow: 0 0 0 20px rgba(168, 75, 84, .7);

  }
  .user-header{
    background: rgba(98, 130, 191,.7);
    box-shadow: 0 0 0 20px rgba(98, 130, 191,.7);
  }
  .shop-header{
    background: rgba(73, 187, 74, .7);
    box-shadow: 0 0 0 20px rgba(73, 187, 74, .7);
  }
  .worker-header{
    background: rgba(74, 92, 243, .7);
    box-shadow: 0 0 0 20px rgba(74, 92, 243, .7);
  }
.card-content div{
  line-height: 30px;
}
  .flex{
    display: flex;
    justify-content: space-between;
  }
</style>
